<template>
    <div class="goods">
        <div class="scroll-nav-wrapper">
            <cube-scroll-nav :side=true
                :data="goods"
                :options="scrollOptions" @change="changeHandler"
                v-if="goods.length"
            >
                <cube-scroll-nav-panel
                    v-for="good in goods"
                    :key="good.name"
                    :label="good.name"
                    :title="good.name"
                    >
                    <ul>
                        <li v-for="food in good.foods" :key="food.name" class="food-item">
                            <div class="icon">
                                <img width="57" height="57" :src="food.icon">
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">￥{{food.price}}</span>
                                    <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </cube-scroll-nav-panel>
            </cube-scroll-nav>
        </div>
    </div>
</template>

<script>
import { getGoods } from 'api'
export default {
    name: 'goods',
     props: {
        data: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            goods:[],
            scrollOptions: {
                click: false,
                directionLockThreshold: 0
            }
        }
    },
    methods: {
        fetch() {
            getGoods().then((goods) => {
                this.goods = goods
            })
        },
      changeHandler(label) {
          console.log('change to', label)
      }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "~common/stylus/mixin"
    @import "~common/stylus/variable"
    .goods
        position: relative
        text-align: left
        height: 100%
        .scroll-nav-wrapper
            position: relative
            width: 100%
            top: 0
            left: 0
            bottom: 48px
         >>> .cube-scroll-nav-bar
            width: 80px
            white-space:normal
            overflow: hidden
        >>> .cube-sticky-content
                h2
                    padding-left: 10px
        >>> .cube-scroll-nav-bar-item
            padding: 0 10px
            display: flex
            align-items: center
            height: 56px
            line-height: 14px
            font-size: $fontsize-small
            background: $color-background-ssss
            &.cube-scroll-nav-bar-item_active
                background: $bg-white
            .text
                flex: 1
                position: relative
            .num
                position: absolute
                right: -8px
                top: -10px
            .support-ico
                display: inline-block
                vertical-align: top
                margin-right: 4px
        >>> .cube-scroll-nav-bar-item_active
            background: $color-white
            color: $color-dark-grey
        >>> .cube-scroll-nav-panel-title
            padding-left: 14px
            height: 26px
            line-height: 26px
            border-left: 2px solid $color-col-line
            font-size: $fontsize-small
            color: $color-grey
            background: $color-background-ssss
          .food-item
              display: flex
              margin: 18px
              padding-bottom: 18px
              position: relative
              align-items: center
              &:last-child
                border-none()
                margin-bottom: 0
              .icon
                  margin-right: 10px
                  flex: 0 0 57px
          .content
              flex: 1
              .name
                  font-size: $fontsize
                  color: #333
                  font-weight: bold
                  margin: 2px 0 8px 0
                  height: 14px
                  line-height: 14px
              .desc
                  color: #ccc
                  margin-bottom: 5px
              .extra
                  color: #cccccc
                  margin-bottom: 5px
                  .count
                      margin-right: 10px
              .price
                  color: red
                  font-weight: bold
                  font-size: 18px

</style>


